<template>
  <div>
    <n-button size="medium" @click="clear(), (setPassword = true)">设置交易密码</n-button>
    <n-modal v-model:show="setPassword" :mask-closable="false" preset="dialog" title="设置密码">
      <n-form :model="modelRef" ref="formRef" :rules="rules">
        <n-form-item label="商户号" path="custNo">
          <n-input
            v-model:value="modelRef.custNo"
            placeholder="输入商户号"
            :show-button="false"
            style="width: 100%"
            maxlength="30"
          />
        </n-form-item>
        <n-form-item path="txPwd" label="新密码">
          <n-input
            v-model:value="modelRef.txPwd"
            @input="handlePasswordInput"
            type="password"
            @keydown.enter.prevent
            style="width: 100%"
            maxlength="30"
          />
        </n-form-item>
        <n-form-item
          first
          path="confirmTxPwd"
          label="确认密码"
          ref="rPasswordFormItemRef"
          style="margin-top: 10px"
        >
          <n-input
            :disabled="!modelRef.txPwd"
            v-model:value="modelRef.confirmTxPwd"
            type="password"
            @keydown.enter.prevent
            style="width: 100%"
            maxlength="30"
          />
        </n-form-item>
        <n-space justify="right">
          <n-form-item>
            <n-space>
              <n-button @click="setPassword = false" size="medium" strong secondary>取消</n-button>
              <n-button
                @click="handleValidateButtonClick"
                attr-type="button"
                size="medium"
                type="info"
                >确认</n-button
              >
            </n-space>
          </n-form-item>
        </n-space>
      </n-form>
    </n-modal>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';

import { insertTragePassword } from '@/api/tragePassword/insertTragePassword';

import { useMessage } from 'naive-ui';

const setPassword = ref(false);

const formRef = ref(null);

const rPasswordFormItemRef = ref(null);

const message = useMessage();

const modelRef = ref({
  custNo: '',
  txPwd: '',
  confirmTxPwd: '',
});

function validatePasswordStartWith(rule, value) {
  return (
    modelRef.value.txPwd &&
    modelRef.value.txPwd.startsWith(value) &&
    modelRef.value.txPwd.length >= value.length
  );
}

function validatePasswordSame(rule, value) {
  return value === modelRef.value.txPwd;
}

const rules = {
  custNo: [
    {
      required: true,
      message: '请输入商户号',
      trigger: 'blur',
    },
  ],
  txPwd: [
    {
      required: true,
      validator(rule, value) {
        if (!value) {
          return new Error('请输入密码');
        } else if (!/^\d{6,}$/.test(value)) {
          return new Error('请输入至少6位密码');
        } else {
          return true;
        }
      },
      trigger: 'blur',
    },
  ],
  confirmTxPwd: [
    {
      required: true,
      message: '请再次输入密码',
      trigger: ['input', 'blur'],
    },
    {
      validator: validatePasswordStartWith,
      message: '两次密码输入不一致',
      trigger: 'input',
    },
    {
      validator: validatePasswordSame,
      message: '两次密码输入不一致',
      trigger: ['blur', 'password-input'],
    },
  ],
};

const handlePasswordInput = () => {
  if (modelRef.value.confirmTxPwd) {
    rPasswordFormItemRef.value.validate({ trigger: 'password-input' });
  }
};

const handleValidateButtonClick = (e) => {
  console.log(modelRef.value);
  e.preventDefault();
  formRef.value.validate((errors) => {
    if (!errors) {
      console.log(modelRef.value);
      modelRef.value.txPwd = md5(modelRef.value.txPwd)
      modelRef.value.confirmTxPwd = md5(modelRef.value.confirmTxPwd)
      insertTragePassword(modelRef.value).then((val) => {
        console.log(val);
        if (val.data.sysHead.retCd == '000000') {
          message.success('设置交易密码成功');
          setPassword.value = false;
        } else {
          message.error('设置交易密码失败');
        }
      });
      clear();
    } else {
      message.error('设置交易密码失败');
    }
  });
};

const clear = () => {
  modelRef.value.custNo = null;
  modelRef.value.txPwd = null;
  modelRef.value.confirmTxPwd = null;
};
</script>